<template>
  <div >
    <p ref="pp">{{msg}}</p>
    <button @click="msg = '不学了'">点我改msg</button>
  </div>
</template>

<script>
export default {
  name: 'VueDemoDemo',

  data() {
    return {
      msg: '学不懂'
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('Created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy',this.$refs.pp);
  },
  destroyed() {
    console.log('Destroyed',this.$refs.pp);
  },
};
</script>

<style lang="scss" scoped>

</style>